<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改元素属性</title>
</head>
<body>
<div id="change" class="change">
  <img data-bind:src="https://consumer.huawei.com/content/dam/huawei-cbg-site/common/mkt/pdp/phones/mate-x3/img/kv/kv@2x.webp"></img>
</div>


<script>
  let element = document.querySelector("#change > img");
  console.log(element);
  let attributeNames = element.getAttributeNames();
  // attributeNames.forEach(item => console.log(item))
  for (const attribute of attributeNames) {
    // console.log(attribute);
    let index = attribute.indexOf(":");
    console.log(index);

    let instruction = attribute.substring(0, index);
    console.log(instruction);

    if (instruction === 'data-bind') {
      // 获取属性名
      let name = attribute.substring(index+1);
      // console.log(name);

      // 获取属性值
      let value = element.getAttribute(attribute);
      // console.log(value);

      element.setAttribute(name, value)

      element.removeAttribute(attribute)
    }



  }
</script>

</body>
</html>